<template>
    <transition name="fade-dialog" appear @after-enter="afterEnter">
        <div class="rx-toast" 
            :style="{'z-index':zIndex}" 
            :class="{'rx-toast-close': close}" 
            ref="rxTost">
            <div class="rx-toast-box" :class="['rx-toast-box-'+type]" v-html="text"></div>
        </div>
    </transition>
</template>

<script type="text/ecmascript-6">
    export default {
        props: {
            text: '',
            zIndex: {
                default: 999999
            },
            duration: {
                type: Number,
                default: 3000
            },
            type: {
                type: String,
                default: 'primary'
            }
        },
        data () {
            return {
                close: false
            }
        },
        methods: {
            afterEnter () {
                setTimeout(() => {
                    this.close = true;
                }, this.duration);
                this.$el.addEventListener('transitionend', () => {
                    this.$emit('close');
                });
            }
        }
    }
</script>

<style scoped lang="scss">
    .rx-toast{
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(1);
        min-width: 200px;
        max-width: 300px;
        transition: all .3s linear;
        &.rx-toast-close{
            transform: translate(-50%, -50%) scale(0);
        }
        .rx-toast-box{
            position: relative;
            padding: 9px 18px 8px 19px;
            border: 1px solid #999;
            border-radius: 4px;
            background-color: #eee;
            color: #000;
            word-break: break-all;
            text-align: center;
            &.rx-toast-box-warning{
                border-color: rgb(248, 216, 109);
                background-color:#f7eecf;
            }
            &.rx-toast-box-danger{
                border-color: rgb(248, 143, 143);
                background-color: #fadfdf;
            }
            &.rx-toast-box-primary{
                border-color: #a7e1c4;
                background-color: #ebf8f2;
            }
        }
    }

    .fade-dialog-enter-active, .fade-dialog-leave-active {
        transition: all .3s linear;
        .rx-toast{
            transform: scale(1);
            transition: all .3s linear;
        }
        .rx-toast-box {
           transform: scale(1);
           transition: all .3s linear;
        }
    }
    .fade-dialog-enter, .fade-dialog-leave-active {
        .rx-toast{
            transform: scale(.1);
            transition: all .3s linear;
        }
        .rx-toast-box {
            transform: scale(0.1);
        }
    }
</style>
